<template>
  <div class="app-container">
    <el-form :ref="formName" :model="ruleForm" label-width="120px">
      <el-form-item :label="$t('firm.firmName')">
        <!-- <el-select v-model="ruleForm.companyName">
          <el-option
            v-for="item of companyList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select> -->
        <el-input v-model="ruleForm.name" :placeholder="$t('firm.firmName')" />
      </el-form-item>
      <el-form-item :label="$t('firm.firmAdd')">
        <el-cascader
          v-model="ruleForm.addrCodes"
          :style="{ width: '300px' }"
          :options="addressTree"
          :props="{ expandTrigger: 'hover' }"
          :placeholder="$t('firm.provinces')"
          filterable
        />
      </el-form-item>
      <el-form-item>
        <el-input v-model="ruleForm.addr" :placeholder="$t('firm.detailAdd')" />
      </el-form-item>
      <el-row>
        <el-col :span="14" />
        <el-col :span="10" />
      </el-row>

      <el-form-item class="footer">
        <el-button type="primary" @click="submitForm(formName)">
          {{ $t('btns.confirm') }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  data() {
    return {
      formName: 'ruleForm',
      ruleForm: {
        companyName: this.$t('firm.firmName'),
        // roleAlias: '用户类型'
        address: '',
        addressDetial: ''
      }
    }
  },
  computed: {
    ...mapState('user', {
      // defaultForm: state => {
      //   const { userName, userInfo } = state
      //   const { realName, roleAlias } = userInfo
      //   return {
      //     userName,
      //     realName,
      //     roleAlias
      //   }
      // }
    }),
    ...mapGetters(['addressTree', 'companyList'])
  },
  mounted() {
    // 获取地址树
    this.$store.dispatch('getAddressTree')
    // this.$store.dispatch('getCompanyList')
    this.$store.dispatch('firmMg/getBusInfo').then(busInfo => {
      const { dmpTenant } = busInfo || {}
      const { name, addr, provinceCode, cityCode, countyCode } = dmpTenant || {}
      const addrCodes = countyCode
        ? [provinceCode, cityCode, countyCode]
        : [provinceCode, cityCode]
      this.ruleForm = {
        name,
        addr,
        addrCodes
      }
    })
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return
        }
        const { addr, addrCodes, name } = this.ruleForm
        const [provinceCode, cityCode, countyCode] = addrCodes || []
        this.$store.dispatch('firmMg/editBus', {
          name,
          addr,
          provinceCode,
          cityCode,
          countyCode
        })
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
}
</style>
